<template>
	<view>
		<nav-bar class="line" :class="isSticky" isItem>
			<view slot="left" class="btn" @click="checkBack">
				<image class="image" src="../../../static/img/common/left-arrow.svg" alt="" />
			</view>
			<view v-if="title" slot="center" style="font-size: 36rpx;">
				{{title}}
			</view>
			<template v-else slot="center" style="width: 100%;">
				<slot name="content">
				</slot>
			</template>
			<view slot="right" class="btn">
				<image class="image" src="../../../static/img/common/menu.svg" alt="" ref="menu" @click.stop="showMenu=!showMenu" />
				<view v-show="showMenu" class="main" @click.stop="showMenu=!showMenu">
					<view class="triangle"></view>
					<view class="menu">
						<view class="row" @click="goHome" v-if="home">
							<image  src="../../../static/img/menu/home.svg" alt="首页" class="icon image" />
							<view class="desc">首页</view>
						</view>
						<view class="row" @click="goCategory" v-if="category">
							<image  src="../../../static/img/menu/search.svg" alt="分类搜索" class="icon image" />
							<view class="desc">分类搜索</view>
						</view>
						<view class="row" @click="goCart" v-if="cart">

							<image  src="../../../static/img/menu/cart.svg" alt="购物车" class="icon image" />
							<view class="desc">购物车</view>
						</view>
						<view class="row" @click="toViewed" v-if="viewed">
							<image  src="../../../static/img/menu/viewed.svg" alt="浏览记录" class="icon image" />
							<view class="desc">浏览记录</view>
						</view>
						<view class="row" @click="goSetting" v-if="setting">
							<image  src="../../../static/img/menu/setting.svg" alt="账户设置" class="icon image" />
							<view class="desc">账户设置</view>
						</view>
						<view class="row" @click="toCollection" v-if="collect">
							<image  src="../../../static/img/menu/collect.svg" alt="我的收藏" class="icon image" />
							<view class="desc">我的收藏</view>
						</view>
						<view class="row" @click="toMy" v-if="my">
							<image  src="../../../static/img/menu/my.svg" alt="个人中心" class="icon image" />
							<view class="desc">个人中心</view>
						</view>
					</view>
				</view>
			</view>

		</nav-bar>
		<view class="reaction-layer" v-if="showMenu" @click.stop="showMenu = !showMenu">
		</view>

	</view>
</template>

<script>
	import NavBar from "./NavBar";

	import {
		mapMutations
	} from "vuex";
	export default {
		components: {
			NavBar
		},
		props: {
			home: {
				type: Boolean,
				default () {
					return false;
				},
			},
			category: {
				type: Boolean,
				default () {
					return false;
				},
			},
			cart: {
				type: Boolean,
				default () {
					return false;
				},
			},
			viewed: {
				type: Boolean,
				default () {
					return false;
				},
			},
			setting: {
				type: Boolean,
				default () {
					return false;
				},
			},
			collect: {
				type: Boolean,
				default () {
					return false;
				},
			},
			my: {
				type: Boolean,
				default () {
					return false;
				},
			},
			sticky: {
				type: Boolean,
				default () {
					return false;
				},
			},
			title: {
				type: String,
				default () {
					return ""
				}
			},
			isItem: {
				type: Boolean,
				default () {
					return true
				}
			},
			isOrder: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				showMenu: false,

			};
		},
		activated() {
			console.log(this.showMenu)
		},
		methods: {
			...mapMutations(["setOrderIndex"]),
			checkBack() {
				if (this.isOrder) {
					this.setOrderIndex(-1);
				}
				this.back();
			},
			layer() {
				console.log('点击遮罩层');
			},
			menu(e) {
				this.showMenu = !this.showMenu;
				// // #ifdef H5
				// let fun = (event) => {
				// 	this.showMenu = !this.showMenu;
				// 	event.stopPropagation();
				// 	event.preventDefault();
				// 	window.removeEventListener("click", fun, false);
				// };
				// window.addEventListener("click", fun, false);
				// // #endif

				// // #ifdef MP

				// // #endif

			},
			goHome() {
				this.showMenu = false;
				console.log(this.showMenu)
				uni.switchTab({
					url: "/pages/home/Home",
					fail(reason) {
						console.log(reason)
					}
				})
			},
			goCategory() {
				this.showMenu = false;
				console.log(this.showMenu)
				uni.switchTab({
					url: "/pages/category/Category",
					fail(reason) {
						console.log(reason)
					}
				})
			},
			goCart() {
				this.showMenu = false;
				console.log(this.showMenu)
				uni.switchTab({
					url: "/pages/cart/Cart",
					fail(reason) {
						console.log(reason)
					}
				})
			},

			goSetting() {
				this.showMenu = false;
				console.log(this.showMenu)
				uni.navigateTo({
					url: "/pages/my/setting/MySetting",
					fail(reason) {
						console.log(reason)
					}
				})
			},


		},
		computed: {
			isSticky() {
				return this.sticky ? "sticky" : "";
			},
		},
		deactivated() {
			this.showMenu = false;
		},
	};
</script>
<style lang="scss" scoped>
	.reaction-layer {
		width: 100vw;
		height: 100vh;
		z-index: 10;
		position: fixed;
		top: 0;
	}


	.btn {
		display: flex;
		width: 120rpx;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		z-index: 11;
	}

	.sticky {
		position: fixed;
		top: 0;
		z-index: 11;
	}

	.triangle {
		top: 5vh;
		right: 44rpx;
		position: absolute;
		width: 0;
		height: 0;
		border: 16rpx solid transparent;
		border-bottom: 16rpx solid rgba(25, 25, 25, 0.9);
		z-index: 11;
	}

	.menu {
		/* #ifdef H5 */
		top: calc(5vh + 32rpx);
		/* #endif */

		/* #ifdef MP */
		top: calc(5vh + 30rpx);
		/* #endif */
		right: 20rpx;
		background-color: rgba(25, 25, 25, 0.9);
		padding: 20rpx 0;
		width: 240rpx;
		position: absolute;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 11;
	}

	.row {
		display: flex;
		height: 70rpx;
		justify-content: center;
		align-items: center;
		padding: 4rpx 0;
	}

	.icon {
		width: 52rpx;
	}

	.desc {
		color: white;
		width: 160rpx;
		font-size: 28rpx;
	}

	.line {
		border-bottom: 2rpx solid rgb(229, 229, 229);
		// height: 100%;
		// width: 100%;
		background-color: white;
	}

	.image {
		height: 64rpx;
		width: 64rpx;
	}
</style>
